<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Ship Admin</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <span th:replace="common::header"></span>

    <span th:replace="common::side"></span>

    <div class="layui-body">
        <!-- 内容主体区域 -->

        <div class="layui-card">
            <div class="layui-card-header">
                <form class="layui-form" action="/rule/list">
                    <div class="layui-form-item">
                        <div class="layui-inline tool-btn">
                            <button class="layui-btn layui-btn-small layui-btn-normal addBtn"
                                    data-url="article-add.html" onclick="return false;" id="addRule" type="button"><i
                                    class="layui-icon">&#xe654;</i></button>
                        </div>
                        <div class="layui-inline">
                            <input type="text" name="appName" placeholder="请输入服务名称"
                                   autocomplete="off" class="layui-input" th:value="${appName}">
                        </div>
                        <button class="layui-btn layui-btn-normal" lay-submit="search">搜索</button>
                    </div>
                </form>
            </div>
            <div class="layui-card-body">

                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>名称</th>
                        <th>服务名称</th>
                        <th>实例版本</th>
                        <th>匹配逻辑</th>
                        <th>优先级</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr th:each="item,iterStat:${ruleVOS}">
                        <td th:text="${iterStat.count}"></td>
                        <td th:text="${item.name}">默认</td>
                        <td th:text="${item.appName}">order</td>
                        <td th:text="${item.version}">gray_1.0</td>
                        <td th:text="${item.matchStr}">/order</td>
                        <td th:text="${item.priority}">
                            1
                        </td>
                        <td th:if="${item.enabled == 1}" style="color: green">开启</td>
                        <td th:if="${item.enabled != 1}" style="color: red">禁用</td>
                        <td th:text="${item.createdTime}">2020-12-26 10:00:00</td>
                        <td>
                            <button type="button" class="layui-btn ayui-btn-xs" th:if="${item.enabled != 1}"
                                    th:onclick="changeStatus([[${item.id}]],1,[[${item.appName}]]);">启用
                            </button>
                            <button type="button" class="layui-btn ayui-btn-xs layui-btn-warm"
                                    th:if="${item.enabled == 1}"
                                    th:onclick="changeStatus([[${item.id}]],0,[[${item.appName}]]);">禁用
                            </button>
                            <button type="button" class="layui-btn ayui-btn-xs layui-btn-danger"
                                    th:onclick="delRule([[${item.id}]]);">删除
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>


    </div>

    <span th:replace="common::footer"></span>
</div>
<script src="/static/layui/layui.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    var layer;
    var form;
    layui.use(['form', 'layer'], function () {
        form = layui.form;
        layer = layui.layer;
        let btn = document.getElementById('addRule');
        btn.onclick = function () {
            let appHtml = '';

            $.ajax({
                type: "GET",
                url: "/app/all",
                // data: '{}',
                // dataType: "json",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'text/html'
                },
                success: function (data) {
                    if (data.code == 200) {
                        var appList = data.data;

                        var temp = ' <div class="layui-form-item">\n' +
                            '                                <label class="layui-form-label"><span style="color:red">*</span>服务名称：</label>\n' +
                            '                                <div class="layui-input-block">\n' +
                            '                                    <select name="appId" lay-verify="required">\n' +
                            '                                        <option value="">请选择服务名称</option>';
                        for (var i = 0; i < appList.length; i++) {

                            temp += '<option value="' + appList[i].id + '">' + appList[i].appName + '</option>';
                        }
                        temp += '</select></div></div>';
                        var addForm = addhtml.replace(/APPList/, temp);
                        layer.open({
                            type: 1,
                            title: '新增',
                            shadeClose: true, //点击遮罩关闭
                            content: addForm
                        });
                        /* 渲染表单 */
                        form.render();

                        form.on('submit(ruleForm)', function(data){
                            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                            $.ajax({
                                url:'/rule',
                                data:data.field,                 //将表单数据序列化，格式为name=value
                                type:'POST',
                                dataType:'json',
                                success:function(data){
                                    //success
                                    if (data.code == 200) {
                                        layer.msg("添加成功");
                                        location.reload();
                                    } else {
                                        layer.msg(data.message);
                                    }
                                },
                                error:function(){
                                    console.log("提交ajax函数异常");
                                },
                            });

                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                        });
                    } else {
                        layer.msg(data.message);
                    }
                },
                error: function (e) {
                    layer.msg(e);
                }
            });
        }


    });


    var addhtml = '<div style="height: 550px;width: 350px;">\n' +
        '\t<form class="layui-form" action="" style="margin:20px 20px" method="post">\n' +
        '  <div class="layui-form-item">\n' +
        '    <label class="layui-form-label"><span style="color:red">*</span>名称：</label>\n' +
        '    <div class="layui-input-block">\n' +
        '      <input type="text" name="name" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">\n' +
        '    </div>\n' +
        '  </div>  APPList\n' +
        '\n' +
        '  <div class="layui-form-item">\n' +
        '    <label class="layui-form-label"><span style="color:red">*</span>实例版本：</label>\n' +
        '    <div class="layui-input-block">\n' +
        '      <input type="text" name="version" required  lay-verify="required" placeholder="请输入实例版本" autocomplete="off" class="layui-input">\n' +
        '    </div>\n' +
        '  </div>\n' +
        '\n' +
        '\n' +
        '   <div class="layui-form-item">\n' +
        '    <label class="layui-form-label"><span style="color:red">*</span>匹配对象：</label>\n' +
        '    <div class="layui-input-block">\n' +
        '      <select name="matchObject" lay-verify="required">\n' +
        '        <option value="">请选择匹配对象</option>\n' +
        '        <option value="DEFAULT">DEFAULT</option>\n' +
        '        <option value="HEADER">HEADER</option>\n' +
        '        <option value="QUERY">QUERY</option>\n' +
        '      </select>\n' +
        '    </div>\n' +
        '  </div>\n' +
        '\n' +
        '  <div class="layui-form-item">\n' +
        '    <label class="layui-form-label">匹配名称：</label>\n' +
        '    <div class="layui-input-block">\n' +
        '      <input type="text" name="matchKey"  placeholder="请输入匹配名称" autocomplete="off" class="layui-input">\n' +
        '    </div>\n' +
        '  </div>\n' +
        '\n' +
        '  <div class="layui-form-item">\n' +
        '    <label class="layui-form-label">匹配方式：</label>\n' +
        '    <div class="layui-input-block">\n' +
        '      <select name="matchMethod">\n' +
        '        <option value="">请选择匹配方式</option>\n' +
        '        <option value="1">=</option>\n' +
        '        <option value="2">regex</option>\n' +
        '        <option value="3">like</option>\n' +
        '      </select>\n' +
        '    </div>\n' +
        '  </div>\n' +
        '\n' +
        '    <div class="layui-form-item">\n' +
        '    <label class="layui-form-label">匹配规则：</label>\n' +
        '    <div class="layui-input-block">\n' +
        '      <input type="text" name="matchRule"  placeholder="请输入匹配规则" autocomplete="off" class="layui-input">\n' +
        '    </div>\n' +
        '  </div>\n' +
        '\n' +
        '    <div class="layui-form-item">\n' +
        '    <label class="layui-form-label"><span style="color:red">*</span>优先级：</label>\n' +
        '    <div class="layui-input-block">\n' +
        '      <input type="text" name="priority" required  lay-verify="required" placeholder="请输入优先级(0-50)" autocomplete="off" class="layui-input">\n' +
        '    </div>\n' +
        '  </div>\n' +
        '\n' +
        '  <div class="layui-form-item">\n' +
        '    <label class="layui-form-label">状态：</label>\n' +
        '    <div class="layui-input-block">\n' +
        '      <input type="checkbox" name="enabled" lay-skin="switch" lay-text="启用|禁用" value="1">\n' +
        '    </div>\n' +
        '  </div>\n' +
        '  <div class="layui-form-item">\n' +
        '    <div class="layui-input-block">\n' +
        '      <button class="layui-btn" lay-submit lay-filter="ruleForm">确认</button>\n' +
        '      <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
        '    </div>\n' +
        '  </div>\n' +
        '</form>\n' +
        '</div>';

    function changeStatus(id, status, appName) {
        let obj = {
            "id": id,
            "enabled": status,
            "appName": appName
        }
        $.ajax({
            type: "PUT",
            url: "/rule/status",
            data: JSON.stringify(obj),
            dataType: "json",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            success: function (data) {
                if (data.code == 200) {
                    window.location.href = "/rule/list/";
                } else {
                    layer.msg(data.message);
                }
            },
            error: function (e) {
                layer.msg(e);
            }
        });
    }


    function delRule(id) {
        layer.confirm('确定要删除该规则吗', {icon: 3, title: '提示'}, function (index) {
            console.log(1111);
            $.ajax({
                type: "DELETE",
                url: "/rule/" + id,
                data: "{}",
                dataType: "json",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg("删除成功");
                        window.location.href = "/rule/list/";
                    } else {
                        layer.msg(data.message);
                    }
                },
                error: function (e) {
                    layer.msg(e);
                }
            });
            layer.close(index);
        });
    }
</script>
</body>
</html>


